<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--在index.html文件中引入init.css文件-->
        <link rel="stylesheet" type="text/css" href="./init.css">
        <!--在index.html中文件引入page.css文件-->
        <link rel="stylesheet" type="text/css" href="./css/page.css">
    </head>
    <body>
    	<!--头部开始-->
    	<div class="header">
    		<!--头部的主体部分-->
    		<div class="h-body">
    			<div class="title">
    				您好，欢迎来到素材网
    			</div>
    			<!--导航部分-->
    			<div class="nav">
    				<ul>
    					<li><a href="#">网站导航</a></li>
    					<li><a href="#">客服中心</a></li>
    					<li><a href="#">建材服务</a></li>
    					<li><a href="#">我的收藏</a></li>
    					<li><a href="#">我的商务室</a></li>
    					<li><a href="#">素材网首页</a></li>
    				</ul>
    			</div>
    		</div>
    	</div>

    	<!--主体部分开始-->
    	<div class="main_body">
    		<!--搜索部分开始-->
    		<div class="logo_search">
    			<div class="left_logo">
    				<img src="./images/1.png" alt="logo">
    			</div>
    			<div class="right_search">
    				<input type="text" name="" class="txt">
    				<input type="button" name="" class="btn">
    			</div>
    		</div>

    		<!--导航部分开始-->
    	<div class="main-nav">
    		<ul>
    			<li><a href="#">首页</a></li>
    			<li><a href="#">建筑材料</a></li>
    			<li><a href="#">儿童安全坐</a></li>
    			<li><a href="#">椅工艺美术品</a></li>
    		</ul>
    	</div>
		<!--主体banner部分开始-->
		<div class="banner">
			<!--左盒子-->
			<div class="left-banner">
				<div class="left-title">
					商机市场
				</div>
				<ul>
					<li class="one"><a href="#">建筑材料</a></li>
					<li class="two"><a href="#">儿童安全座椅</a></li>
					<li class="three"><a href="#">工艺美术品</a></li>
					<li class="four"><a href="#">建筑材料</a></li>
					<li class="five"><a href="#">儿童安全座椅</a></li>
					<li class="six"><a href="#">工艺美术品</a></li>
				</ul>
			</div>
			<!--中盒子-->
			<div class="middle-banner">
				<img src="./images/center.png" alt="梅兰花图片">
			</div>
			<!--右盒子-->
			<div class="right-banner">
				<!--右上盒子-->
				<div class="right-top-banner">
					<img src="./images/center-r.png" alt="广告">
				</div>
				<!--右下盒子-->
				<div class="right-bottom-banner">
					<img src="./images/center-r2.png" alt="广告">
				</div>
			</div>
		</div>
		<!--内容导航开始-->
		<div class="content-nav">
			<ul>
				<li>建筑材料</li>
			</ul>
		</div>

		<!--内容区-->
		<div class="content">
			<!--内容左盒子-->
			<div class="left-sidebar">
				<!--上侧盒子-->
				<div class="lt-sidebar">
					<!--上侧盒子的左盒子-->
					<div class="ltl-sidebar">
						<!--左盒子-->
						<div class="l-list1">
							<!--上盒子-->
							<div class="lt-list1">
								<img src="./images/c1.png" alt="立即购买">
							</div>
							<!--下盒子-->
							<div class="lb-list1">
								
							</div>
						</div>
						<!--右盒子-->
						<div class="r-list2">
							<p class="p1">
								好太太晾衣架 铝钛合金 升降双杆 
							</p>
							<p class="p2">
								自动换挡 安全耐用 
								<br/>
								稳定性好 抗氧化强 
							</p>
							<p class="p3">
								239.00 <del>¥386.00</del> 
							</p>
							<p class="p4">
								限量99件 已售出 20件 
							</p>
						</div>
					</div>
					<!--上侧盒子的右盒子-->
					<div class="ltl-sidebar">
						<!--左盒子-->
						<div class="l-list1">
							<!--上盒子-->
							<div class="lt-list1">
								<img src="./images/c1.png" alt="立即购买">
							</div>
							<!--下盒子-->
							<div class="lb-list1">
								
							</div>
						</div>
						<!--右盒子-->
						<div class="r-list2">
							<p class="p1">
								好太太晾衣架 铝钛合金 升降双杆 
							</p>
							<p class="p2">
								自动换挡 安全耐用 
								<br/>
								稳定性好 抗氧化强 
							</p>
							<p class="p3">
								239.00 <del>¥386.00</del> 
							</p>
							<p class="p4">
								限量99件 已售出 20件 
							</p>
						</div>
					</div>
				</div>
				<!--横线-->
				<div class="middle-line"></div>
				<!--下侧盒子-->
				<div class="lt-sidebar">
					<div class="lt-sidebar">
					<!--上侧盒子的左盒子-->
					<div class="ltl-sidebar">
						<!--左盒子-->
						<div class="l-list1">
							<!--上盒子-->
							<div class="lt-list1">
								<img src="./images/c1.png" alt="立即购买">
							</div>
							<!--下盒子-->
							<div class="lb-list1">
								
							</div>
						</div>
						<!--右盒子-->
						<div class="r-list2">
							<p class="p1">
								好太太晾衣架 铝钛合金 升降双杆 
							</p>
							<p class="p2">
								自动换挡 安全耐用 
								<br/>
								稳定性好 抗氧化强 
							</p>
							<p class="p3">
								239.00 <del>¥386.00</del> 
							</p>
							<p class="p4">
								限量99件 已售出 20件 
							</p>
						</div>
					</div>
					<!--上侧盒子的右盒子-->
					<div class="ltl-sidebar">
						<!--左盒子-->
						<div class="l-list1">
							<!--上盒子-->
							<div class="lt-list1">
								<img src="./images/c1.png" alt="立即购买">
							</div>
							<!--下盒子-->
							<div class="lb-list1">
								
							</div>
						</div>
						<!--右盒子-->
						<div class="r-list2">
							<p class="p1">
								好太太晾衣架 铝钛合金 升降双杆 
							</p>
							<p class="p2">
								自动换挡 安全耐用 
								<br/>
								稳定性好 抗氧化强 
							</p>
							<p class="p3">
								239.00 <del>¥386.00</del> 
							</p>
							<p class="p4">
								限量99件 已售出 20件 
							</p>
						</div>
					</div>
				</div>
				</div>
			</div>
			<!--内容右盒子-->
			<div class="right-sidebar">
				<div class="r-title">
					建材资讯
				</div>
				<ul>
					<!--用高度剩余法-->
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
					<li><a href="#">贵阳钢铁市场7月17日市场价格行情</a></li>
				</ul>
			</div>
		</div>

    	</div>
    </body>
</html>